<template>
  <div class="gallery" @click="handleGalleryClick">
    <div class="gallery-content">
     <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) of galleryImgs" :key="index">
       <img :src="item">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
     </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailGallery',
  props: ['galleryImgs'],
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observe: true,
        observeParents: true
      }
    }
  },
  methods: {
    handleGalleryClick () {
      this.$emit('handleGalleryClick')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .gallery >>> .swiper-container
    overflow: inherit
  .gallery >>> .swiper-pagination-fraction
    bottom:-55px
    color:#fff
  .gallery
    z-index:999
    overflow:hidden
    display:flex
    flex-direction:column
    justify-content:center
    position:fixed
    top:0
    left:0
    right:0
    bottom:0
    background:#000
    .gallery-content
      width:100%
      height:0
      padding-bottom:100%
      img
        width:100%
</style>
